import React from 'react'
import {Button, Card, Popover, Space, Table,} from 'antd'
import {
    ReloadOutlined, PlusOutlined
} from '@ant-design/icons'
import './index.css'


function tabTerminal(props: any) {
    const {columns, tiitle, addEquipment,handleFinish, tableData, pageChange} = props
    return (
        <Card className="search-forms">
            <div className="tabhandel">
                <div className="table-title">{tiitle}</div>
                <div>
                    <Space>
                        <Button type="primary" onClick={addEquipment} icon={<PlusOutlined/>}> 新增</Button>
                        <Popover content="刷新" >
                            <ReloadOutlined onClick={()=>{handleFinish()}}/>
                        </Popover>
                    </Space>
                </div>
            </div>

            <Table
                pagination={{
                    hideOnSinglePage: true, simple: true, pageSize: 10,
                    total: tableData.total, onChange: pageChange
                }}  columns={columns} rowKey={(record: any) => record.deviceID}
                dataSource={tableData.data}/>
        </Card>
    )
}

export default tabTerminal
